<template>
  <div class="cs-page-container">

    <div class="cs-filter-container">
      <el-input
        v-if="!userId"
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model.trim="listQuery.postId"
        clearable
        placeholder="请输入动态ID"
      />
      <el-select
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="请选择性别"
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
        <el-option label="未知" value="0" />
      </el-select>
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model="listQuery.type"
        filterable
        placeholder="审核类型"
      >
        <el-option label="全部" :value="0" />
        <el-option label="已删除" :value="1" />
        <el-option label="已审阅" :value="2" />
        <el-option label="未审阅" :value="3" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div style="margin:10px 0">
      <el-button
        type="danger"
        @click="onHandleAll(1)"
      >批量删除</el-button>
      <el-button
        type="primary"
        @click="onHandleAll(2)"
      >批量审阅</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        row-key="recordId"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="所属动态ID"
          prop="targetContentId"
        >
          <template slot-scope="{ row }">
            <a @click="getComment(row)">{{ row.targetContentId }}</a>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
        >
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
            <span>{{ userAddress[row.userId] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用户昵称"
        >
          <template slot-scope="{ row }">{{ row.nickname }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="性别"
        >
          <template slot-scope="{ row }">{{ row.gender | gender }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="评论内容"
        >
          <template slot-scope="{ row }">{{ row.comment }}</template>
        </el-table-column>
        <el-table-column align="center" label="国家" width="130">
          <template slot-scope="{ row }">{{ row.countryCode | countryCode }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="评论时间"
          min-width="140"
        >
          <template slot-scope="{ row }">{{ row.createTimestamp | parseTime }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="{ row }">
            <p v-if="row.isReview">已审阅</p>
            <!--            <p v-if="row.isReview && !row.deleteFlag">已审阅</p>-->
            <!--            <p v-else-if="row.isReview && row.deleteFlag">已删除</p>-->
            <p v-else>未审阅</p>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="是否删除"
        >
          <template slot-scope="{ row }">
            <p v-if="row.deleteFlag">已删除</p>
            <p v-else>未删除</p>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="300px"
        >
          <template slot-scope="{ row }">
            <el-button
              v-if="!row.isReview"
              type="primary"
              size="mini"
              @click="onHandle([row.commentId])"
            >审阅</el-button>
            <el-button
              v-if="!row.deleteFlag"
              type="danger"
              size="mini"
              @click="onDelete([row.commentId])"
            >删除</el-button>
            <el-button
              v-if="row.forbidState===0"
              type="danger"
              size="mini"
              @click="onForbid(row)"
            >封号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <b style="float: left;margin-top: 37px;">显示{{ onlineTotal }} </b>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>
    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'0'"
      @onSuccess="doSearch"
    />
    <el-dialog
      title="动态评论"
      :visible.sync="dynamicFormVisible"
      width="70%"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :model="dynamicItem"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <div class="list-detail">
          <Dunamic :depth="0" :content-id="dynamicItem.row.targetContentId" :is-more="dynamicItem.commentVoList.length>=20" :list="dynamicItem.commentVoList" :dynamic-content="dynamicItem.dynamicContent"></Dunamic>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import { xhrCommentAudit, xhrCommentDelete, xhrCommentHandle } from '@/api/anchor'
  import AnchorMixin from '../mixin'
  import DialogForbidAccount from '@/views/account/components/DialogForbidAccount'
  import Dunamic from './dynamic'
  import { getDynamicCommentList, getDynamicDetail } from '@/api/anchor';
  import { deepCopy } from 'ali-oss/lib/common/utils/deepCopy';
  import { getCountryItem } from '@/filters'
  export default {
    name: 'CommentList',
    components: { TablePagination, DialogForbidAccount, Dunamic },
    mixins: [AnchorMixin],
    props: {
      userId: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        list: [],
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 100,
          type: 0,
          limit: 100,
          gender: null
        },
        onlineTotal: 0,
        status: null,
        daterangeValue: '',
        dialogVisible: false,
        forbidAccounts: null,
        dynamicFormVisible: false,
        dynamicItem: {
          row: {},
          commentVoList: [],
          dynamicContent: {}
        },
        userAddress: {},
        countryCodeItem: getCountryItem(),
        selectRows: []
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        if (!this.validateParams(this.listQuery)) {
          return
        }
        this.handleCheckedStatus()
        if (this.userId) {
          this.listQuery.userId = this.userId
        }
        const send_data = deepCopy(this.listQuery)
        if (send_data.type === 1) {
          send_data.deleteFlag = true
        }
        if (send_data.type === 2) {
          send_data.isReview = true
        }
        if (send_data.type === 3) {
          send_data.isReview = false
        }
        xhrCommentAudit(send_data)
          .then(resp => {
            var data_list = []
            if (this.listQuery.type === 3) {
              var count = 0
              for (var index in resp.data.list) {
                if (resp.data.list[index].status !== 2) {
                  data_list.push(resp.data.list[index])
                  count += 1
                }
              }
              console.log(count)
            } else {
              data_list = resp.data.list
              count = resp.data.list.length
            }
            this.list = data_list
            this.onlineTotal = count
            this.total = resp.data.total
            this.status = resp.data.status
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      onForbid(row) {
        this.forbidAccounts = String(row.userId)
        this.dialogVisible = true
      },
      handleSelectionChange(rows) {
        this.selectRows = rows
      },
      onHandleAll(status) {
        if (!this.selectRows.length) {
          this.$message.warning('请选择一条数据')
        } else if (status === 1) {
          const commentIds = this.generateParams(this.selectRows)
          this.onDelete(commentIds)
        } else if (status === 2){
          const commentIds = this.generateParams(this.selectRows)
          this.onHandle(commentIds)
        }
      },
      generateParams(rows) {
        const commentIds = []
        rows.forEach(row => {
          commentIds.push(row.commentId)
        })
        return commentIds
      },
      onDelete(commentIds) {
        // this.$confirm('确定删除 ID:[' + row.commentId + '] 的评论记录?').then(() => {
        xhrCommentDelete({ comment_id_list: commentIds.join(',') })
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
        // })
      },
      onHandle(commentIds) {
        xhrCommentHandle({ids: commentIds})
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      handleClick(tab) {
        switch (tab.name) {
          case 'first':
            this.$router.push('/anchor/post-list')
            break
        }
      },
      getComment(row) {
        const data = {
          'contentId': row.targetContentId
        }
        getDynamicDetail(data).then(rep => {
          this.dynamicItem.dynamicContent = rep.data
          getDynamicCommentList(data).then(response => {
            this.dynamicItem.row = row
            this.dynamicItem.commentVoList = response.data.commentVoList
            this.dynamicFormVisible = true
          })
        })
      }
    }
  }
</script>
